<!-- 从业者-职业竞赛-竞赛详情 -->
<template>
	<view class="container">
		<!-- 封面图片 -->
		<view class="cover-container">
			<image class="cover-image" :src="jsItemList.bjs_logo_uri[0].url" mode="aspectFill"></image>
			<view class="cover-status">{{jsItemList.bjs_state == '0' ? '预热中': jsItemList.bjs_state == '1' ? '进行的' : '已结束'}}</view>
		</view>

		<!-- 赛事信息 -->
		<view class="card">
			<view class="competition-title">{{jsItemList.bjs_name}}</view>
			<view class="info-item">
				<!-- <u-icon name="calendar" size="16" color="#666"></u-icon> -->
				<text>开赛时间：{{jsItemList.bjs_startdate}} 至 {{jsItemList.bjs_enddate}}</text>
			</view>
			<view class="info-item">
				<!-- <u-icon name="info-circle" size="16" color="#666"></u-icon> -->
				<text>投票规则：每人每天最多投出{{ jsItemList.bjs_tpmax }}票，投同一名参赛者每天限{{ jsItemList.bjs_tponemax }}票</text>
			</view>
		</view>

		<!-- 参赛者功能区 -->
		<view class="card function-grid" v-show="ismyjsz == true ">
			<view class="grid-title">我是参赛者</view>
			<u-grid :col="3" :border="false">
				<u-grid-item @click="navigateTo('competitor')">
					<!-- <u-icon name="account" size="28"></u-icon> -->
					<image src="/static/icon_gerenfengcai.png" style="width: 64rpx; height: 64rpx;"></image>
					<text class="grid-text">个人风采分享拉票</text>
					<!-- <text class="grid-text">分享拉票</text> -->
				</u-grid-item>
				<u-grid-item @click="navigateTo('exce')">
					<image src="/static/icon_tiku.png" style="width: 64rpx; height: 64rpx;"></image>
					<text class="grid-text">题库练习</text>
					<text class="grid-text"></text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('test')">
					<image src="/static/icon_kaoshi.png" style="width: 64rpx; height: 64rpx;"></image>
					<text class="grid-text">模拟测试</text>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 赛事功能区 -->
		<view class="card function-grid">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#03B8CD"></u-tabs>
		</view>

		<!-- 图文介绍 -->
		<view class="card" v-if="current == 0">
			<view class="section-title">赛事介绍</view>
			<view class="content-text">
				{{jsItemList.bjs_desc}}
			</view>
		</view>
		<!-- 参赛者榜单 -->
		<view class="card" v-if="current == 1">
			<view class="section-title">参赛者榜单</view>
			<view class="container-participant">
				<!-- 投票人列表 -->
				<view class="participant-grid">
					<view class="participant-item" v-for="(item, index) in participants" :key="item.user_code">
						<!-- 照片容器 -->
						<view class="photo-container" @click="handleVote(index)">
							<image class="photo" :src="item.user_header_uri[0].url" mode="aspectFill"
								:style="{height: item.selected ? '116%' : '110%'}"></image>
							<text class="photo-count">{{ item.user_name }}照片</text>
						</view>

						<!-- 用户信息 -->
<!-- 						<view class="user-info">
							<text class="name">{{ item.name }}</text>
							<text class="votes">{{ item.votes }}票</text>
						</view> -->

						<!-- 投票按钮 -->
						<u-button class="vote-btn"  shape="circle" type="default" v-if="item.user_piaoshu !== 0"
							@click="handleVote(index.user_code)">
							<!-- {{ item.votedToday ? '已投票' : '投票' }} -->
							已投票
						</u-button>
						<u-button v-else class="vote-btn"  shape="circle" type="default" :custom-style="btuStyle"
							@click="addTouPiao(item.user_code)">
							投票
						</u-button>
					</view>
				</view>

				<!-- 底部提交按钮 -->
<!-- 				<view class="submit-btn">
					<u-button type="primary" shape="circle" @click="submitVotes" :disabled="selectedCount === 0" :custom-style="btuStyle">
						提交投票
					</u-button>
				</view> -->
			</view>
		</view>
		<!-- 通知介绍 -->
		<view class="card" v-if="current == 2">
			<view class="section-title">通知公告</view>
			<view class="content-text">
				{{ jsItemList.bjs_tzgg }}
			</view>
		</view>
		<!-- 结果公示 -->
		<view class="card" v-if="current == 3">
			<view class="section-title">结果公示</view>
			<view class="content-text">
				结果公示结果公示结果公示结果公示结果公示结果公示结果公示结果公示结果公示结果公示结果公示结果公示
			</view>
		</view>

		<!-- 底部弹出题库选择项 -->
		<view class="popup-container">
			<u-popup v-model="showInvitePopup" mode="bottom" border-radius="20" height="1000" closeable>
				<view class="invitation-popup">
					<view class="popup-header">
						<text class="title">选择题库</text>
					</view>
					<!-- 题库选项 -->
					<view class="popup-content">
						<view class="">
							<!-- 顶部用户信息区域 -->
							<view class="company-info" v-for="(item,index) in questionList" :key=index
								@click="selectQuestion('index')">
								<view class="info-right">
									<view class="company-name">{{item.questionName}}</view>
									<view class="phone">{{item.major}} | {{item.level}}</view>
								</view>
								<view>
									<u-section :show-line="false" sub-title=" "></u-section>
								</view>
							</view>

						</view>
					</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				list: [{
					name: '赛事介绍'
				}, {
					name: '参赛者榜单'
				}, {
					name: '通知公告'
				}, {
					name: '结果公示',
					// count: 5
				}],
				current: 0,
				// 弹窗
				showInvitePopup: false,
				// 题库列表
				questionList: [{
						questionName: '模拟考试',
						major: '所属专业',
						level: '2级'
					},
					{
						questionName: '真实考试',
						major: '所属专业',
						level: '3级'
					},
				],
				// 参赛者榜单
				participants: [{
						photo: '/static/images/user1.jpg',
						photoCount: 34,
						name: '用户姓名',
						votes: 123,
						votedToday: false,
						selected: false
					},
					{
						photo: '/static/images/user2.jpg',
						photoCount: 34,
						name: '用户姓名',
						votes: 133,
						votedToday: false,
						selected: false
					},
					{
						photo: '/static/images/user3.jpg',
						photoCount: 34,
						name: '用户姓名',
						votes: 12,
						votedToday: true,
						selected: false
					},
					{
						photo: '/static/images/user4.jpg',
						photoCount: 34,
						name: '用户姓名',
						votes: 123,
						votedToday: false,
						selected: false
					},
					{
						photo: '/static/images/user5.jpg',
						photoCount: 34,
						name: '用户姓名',
						votes: 123,
						votedToday: false,
						selected: false
					}
				],
				votedToday: false,  ////临时使用投票按钮控制
				maxVotesPerDay: 10,
				todayVotedCount: 2,
				jscode: '' ,////竞赛code
				jsItemList: {},
				ismyjsz: false,  ///判断是否是竞赛者
			}
		},
		computed: {
			// 参赛榜单
			selectedCount() {
				return this.participants.filter(item => item.selected).length
			}
		},
		onLoad(options) {
			if(options.linkcode) {
				this.jscode = options.linkcode
			} else {
				this.jscode = options.bjscode
			}			
			console.log('jscode:', this.jscode,options)
		},
		onShow() {
			// 查询竞赛具体内容
			this.selectBjs()
			// 根据竞赛code获取参加的基础竞赛选手列表 
			this.selectBjsUserList()
		},
		methods: {
			// 查询竞赛具体内容
			selectBjs() {
				this.$u.api.querybjs({
					"bjscode": this.jscode
				}).then(res => {
					console.log('js-yefe',res )
					this.jsItemList = res.data.base_info
				})
			},
			// 根据竞赛code获取参加的基础竞赛选手列表
			selectBjsUserList() {
				this.$u.api.querybjsuserlist({
					"bjscode": this.jscode,
					"pagesize": 1000 //#分页查询，每页显示的记录数
				}).then(res => {
					this.participants = []
					this.participants = res.data.base_info
					this.ismyjsz = this.participants.find(item => item.user_code === uni.getStorageSync('usercode')) ?  true : false
					console.log('参赛者：',res, this.ismyjsz)
				})
			},
			// 个人风采提示
			tocastTip() {
				this.$u.toast('分享拉票');				
			},
			navigateTo(page) {
				// 根据不同的页面跳转
				const routes = {
					'competitor': `/pages/Practitioner/prizeFight/competitor?jscode=${this.jscode}&tponemax=${this.jsItemList.bjs_tponemax}`,
					'share': '/pages/competition/share',
					'practice': '/pages/competition/practice',
					'test': `/pages/Practitioner/question/question?jscode=${this.jscode}`,
					'exce': `/pages/Practitioner/question/question?jscode=${this.jscode}`,
					'ranking': '/pages/competition/ranking',
					'notice': '/pages/competition/notice',
					'result': '/pages/competition/result'
				}

				uni.navigateTo({
					url: routes[page]
				})
			},
			// 切换tab
			change(index) {
				this.current = index;
			},
			// 显示弹窗
			showPopup() {
				this.showInvitePopup = true
			},
			// 参赛榜单
			handleVote(index) {
				const participant = this.participants[index]

				// 如果今天已经投过票，则不能再次投票
				if (participant.votedToday) {
					uni.showToast({
						title: '今天已为该用户投过票',
						icon: 'none'
					})
					return
				} else {
					this.participants[index].votedToday = true;
					this.participants[index].votes++;
				}

				// 检查今日投票总数是否已达上限
				if (!participant.selected && this.todayVotedCount >= this.maxVotesPerDay) {
					uni.showToast({
						title: '今日投票已达上限',
						icon: 'none'
					})
					return
				}

				// 切换选中状态
				this.participants[index].selected = !this.participants[index].selected
			},
			
			// 投票
			addTouPiao(usercode) {
				// 从业者获取今日可以投票给竞赛选手的投票数量
				this.$u.api.queryjstpcount({
					"bjscode":  this.jscode, //#竞赛code
					"cyjstpusercode": usercode,  ///投票的用户code,
					"usercode": uni.getStorageSync('usercode') ///#从业者的用户code
				}).then(res => {					
					console.log('票数:', res)
					let count = res.data.base_info
					if(count !== 0) {
						this.cyzTouPiao(usercode)
					} else {
						uni.showLoading({
							title: '对同一个竞赛者投票已经达到上限！'
						})
					}					
				})

			},
			// 投票
			cyzTouPiao(usercode) {
				this.$u.api.addjstp({
					"bjscode": this.jscode, //#竞赛code
					"usercode": usercode,//#参加竞赛的用户code
					"cyjstpusercode": uni.getStorageSync('usercode') ////投票的用户code
				}).then(res => {
					console.log('toupiao:', res)
					this.selectBjsUserList()
					this.votedToday = true					
				})
			},
			
			submitVotes() {
				const selectedParticipants = this.participants.filter(item => item.selected)

				uni.showLoading({
					title: '提交投票中...'
				})

				// 模拟API请求
				setTimeout(() => {
					uni.hideLoading()

					// 更新投票状态
					selectedParticipants.forEach(item => {
						item.votes++
						item.votedToday = true
						item.selected = false
					})

					this.todayVotedCount += selectedParticipants.length

					uni.showToast({
						title: '投票成功',
						icon: 'success'
					})
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 60px;
		// background-color: #f7f7f7;
		background: linear-gradient(to bottom, #CAEDEE, #F1F7F7);
		min-height: 100vh;
	}

	.cover-container {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		/* 16:9 比例 */
		overflow: hidden;

		.cover-image {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #c5c5c5;
		}

		.cover-status {
			position: absolute;
			top: 180px;
			right: 20px;
			background-color: rgba(0, 0, 0, 0.6);
			color: #fff;
			padding: 4px 12px;
			border-radius: 12px;
			font-size: 12px;
		}
	}

	.card {
		background-color: #fff;
		border-radius: 8px;
		margin: 10px;
		padding: 15px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	}

	.competition-title {
		font-size: 18px;
		// font-weight: bold;
		margin-bottom: 10px;
		// @include text-ellipsis(2); // 两行省略
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		font-size: 14px;
		color: #666;

		.u-icon {
			margin-right: 5px;
		}
	}

	.function-grid {
		.grid-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 15px;
			color: #333;
		}

		.grid-text {
			font-size: 12px;
			margin-top: 5px;
			color: #666;
		}

		/deep/ .u-grid-item {
			padding: 10px 0;
		}
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
	}

	.content-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}

	.user-info {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #eee;
		font-size: 14px;

		.avatar {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin-right: 8px;
		}
	}

	// 弹窗
	.invitation-popup {
		// height: 70vh;
		display: flex;
		flex-direction: column;
		width: 93%;
		// margin-right:30px;

		.popup-header {
			padding: 30rpx;
			text-align: center;
			// border-bottom: 1rpx solid #f5f5f5;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.popup-content {
			flex: 1;
			padding: 30rpx;
			overflow-y: auto;
		}

		.popup-footer {
			padding: 20rpx;
			// border-top: 1rpx solid #f5f5f5;
		}

		.form-item {
			// margin-bottom: 30rpx;

			.item-label {
				display: block;
				// margin-bottom: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-input {
			padding: 20rpx;
			background-color: #f5f5f5;
			border-radius: 8rpx;
		}
	}

	// 题库
	.company-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 4rpx;
		border-bottom: 1px solid #c1c3c7;

		.info-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20px;


			.company-name {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.phone {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 10rpx;
			}

			.company-type {
				font-size: 26rpx;
				color: #888;
			}
		}
	}

	// 参赛排行棕
	.container-participant {
		padding: 20rpx 0;
		padding-bottom: 50rpx;
		background-color: #f7f7f7;
		// min-height: 100vh;
	}

	.participant-grid {
		display: flex;
		flex-wrap: wrap;
		// 中间平均分
		justify-content: space-evenly;
		gap: 20rpx 0;
	}

	.participant-item {
		width: 32%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 15rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.photo-container {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 133%;
		/* 3:4 比例 */
		overflow: hidden;
		border-radius: 8rpx;
		margin-bottom: 15rpx;

		.photo {
			position: absolute;
			width: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: height 0.3s;
		}

		.photo-count {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 20rpx;
			text-align: center;
			padding: 6rpx 0;
		}
	}

	.user-info {
		width: 100%;
		text-align: center;
		margin-bottom: 15rpx;

		.name {
			font-size: 28rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 5rpx;
			// @include text-ellipsis(1);
		}

		.votes {
			font-size: 24rpx;
			color: #ff4d4f;
			display: block;
		}
	}

	.vote-btn {
		width: 80%;

		/deep/ .u-btn {
			height: 60rpx;
			font-size: 26rpx;
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;

		/deep/ .u-btn {
			height: 80rpx;
			font-size: 32rpx;
		}
	}

	/* 文本省略混入 */
	@mixin text-ellipsis($line) {
		display: -webkit-box;
		-webkit-line-clamp: $line;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>